<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <div class="schoolBoxCont">        
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">
                url
              </div>
              <div class="schoolBoxContItemInput">
                <el-input
                  clearable
                  v-model="queryBox.url"
                  placeholder="url"
                >
                </el-input>
              </div>
            </el-form-item>
          </div>
          <div class="schoolBoxContItem">
            <el-form-item label prop="name">
              <div class="schoolBoxContItemTitle">    
                时间
              </div>
              <div class="schoolBoxContItemInput schoolBoxContItemInput2">
                <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd 00:00:00"
                  format="yyyy-MM-dd 00:00:00"
                  align="right">
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="from-btns">
      <kt-button
        :label="$t('action.reset')"
        perms="true"
        type="primary"
        @click="reset('queryBox')"
      />
      <kt-button
        :label="$t('action.search')"
        perms="true"
        type="primary"
        @click="search"
      />
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('导出')"
        perms="DataCollection:PageStatistics:export"
        type="primary"
        @click="exportData"
      />
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        :showOperation='false'
        class="pageStatistics"
        permsSee="customer:chinaedu:see"
        permsEdit="customer:chinaedu:edit"
        :data="pageResult"
        :columns="columns"
        :loading='loading'
        @sortChange="sortChange"  
        @findPage="findPage"
      ></Crm-table>
    </div>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "PageStatistics",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      loading: false,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "pageUrl", label: "页面URL", minWidth: 220 },
        { prop: "uv", label: "访客数（UV）",  sortable: 'custom',minWidth: 120 },
        { prop: "ipNum", label: "IP数", minWidth: 120 },
        { prop: "pv", label: "浏览量（PV）",  sortable: 'custom',minWidth: 120 },
        { prop: "visitTime", label: "平均访问时长(秒)",  minWidth: 120 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      value3: "",
      queryBox: {
        startDate:'',
        endDate:'',
        url:'',
        bid:'',
        buryName:'',
        bName:'',
        id:''
      },
      isSearch:false
    };
  },
  methods: {
    // 排序
    sortChange(column) {
      if(column.index.order=='ascending'){
        if(column.index.prop=='uv'){
          this.queryBox.orderField='uv'
        }
        if(column.index.prop=='pv'){
          this.queryBox.orderField='pv'
        }
        if(column.index.prop=='pv'){
          this.queryBox.orderField='pv'
        }

        this.queryBox.orderType='asc'
      }
      if(column.index.order=='descending'){
        if(column.index.prop=='uv'){
          this.queryBox.orderField='uv'
        }
        if(column.index.prop=='pv'){
          this.queryBox.orderField='pv'
        }
        if(column.index.prop=='pv'){
          this.queryBox.orderField='pv'
        }

        this.queryBox.orderType='desc'
      }
      this.findPage(null)
    },
    // 搜索
    search() {
      this.loading = true;
      if(this.value2){
        this.queryBox.startDate = this.value2[0];
        this.queryBox.endDate = this.value2[1];
      }else{
        this.queryBox.startDate = '';
        this.queryBox.endDate = '';
      }
      
      this.pageRequest.pageNum = 1;
      this.isSearch=true
      this.findPage(null);
    },
    handleChange(value) {
      console.log(value);
    },
    // 获取分页数据
    findPage: function(data) {
      this.loading = true;
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      //昨天的时间
      let day1 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
      let s1 =
        day1.getFullYear() +
        "-" +
        (day1.getMonth() + 1 > 10
          ? +"0" + day1.getMonth() + 1
          : day1.getMonth() + 1) +
        "-" +
        day1.getDate() +
        " 00:00:00";
      //今天的时间
      let day2 = new Date();
      day2.setTime(day2.getTime());
      let s2 =
        day2.getFullYear() +
        "-" +
        (day1.getMonth() + 1 > 10
          ? +"0" + day1.getMonth() + 1
          : day1.getMonth() + 1) +
        "-" +
        day2.getDate() +
        " 00:00:00";
      let str = "" + this.dateFormat(s1) + "至" + this.dateFormat(s2);

      
      if(!this.isSearch){
        this.queryBox.startDate = this.dateFormat(s2);
        this.queryBox.endDate = this.dateFormat(s2);
      }
      
      
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.user.BhPageStatisticsList(this.queryBox).then(res => {
        let content = { content: res.data, totalSize: res.total };
        this.pageResult = content;
        this.loading = false;
      });
    },
    // 获取时间
    dateFormat: function(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.startDate = "";
      this.queryBox.endDate = " ";
      this.queryBox.url=''
      this.queryBox.bid=''
      this.queryBox.bName=''
      this.queryBox.buryName='' 
      this.value2 = "";
      this.isSearch=false
      this.queryBox.orderType=''
      this.queryBox.orderField=''
      this.findPage(null);
    },
    exportData(){
      this.queryBox.pageNum=1
      axios({
        method: "get",
        url: baseUrl + "/behaviorLog/exportBhPageStatistics",
        params: this.queryBox
      }).then(res => {
        window.open(res.request.responseURL);
      });
    },
  },
  mounted() {}
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scoped>
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.el-row .el-col {
  margin-left: 0;
}
.query-box .el-row .el-col {
  margin-left: 2%;
}
.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
</style>
<style lang='scss'>
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
.pageStatistics {
  tbody {
    tr {
      td {
        height: 35px;
      }
    }
  }
}
</style>
<style lang="scss">
.schoolBoxCont {
  margin: 5px 5px;

  .schoolBoxContItem {
    margin-right: 10px;
    float: left;
    .el-form-item__content {
      display: flex;
      flex-direction: row;
    }
    .schoolBoxContItemTitle {
      background: #f5f7fa;
      width: 115px;
      border: 1px solid #dcdfe6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      line-height: 39px;
      border-right: none;
    }
    .schoolBoxContItemInput {
      width: 150px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
    .schoolBoxContItemInput2 {
      width: 350px;
      line-height: 39px;
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
}
</style>
